#app {
    width: 80%;
    margin: 1rem auto;

    .cart {
        width: 3.85rem;
        position: relative;

        //标题部分
        .title {
            border: 1px solid #ddd;
            width: 2rem;
            position: absolute;
            top: 0;
            right: 0;
            text-align: center;
            padding: .05rem;
            height: .35rem;
            // border-bottom: none;
            // background-color: #fff;
            z-index: 999;
            background-color: #F5F5F5;
            cursor: pointer;

            img {
                width: .2rem;
                vertical-align: middle;
                margin-right: .1rem;
            }

            span {
                vertical-align: middle; //垂直居中
            }

            //&:after的意思是在父元素中建立的元素
            &:after {
                content: '1';
                display: block;
                background-color: #DC1742;
                height: .18rem;
                color: #fff;
                width: .18rem;
                border-radius: 50%;
                text-align: center;
                line-height: .18rem;
                position: absolute;
                top: 0;
                right: .2rem;
                transform: translateY(-50%);
                font-size: .12rem;
            }
        }

        //购物车列表
        .cart-list {
            position: absolute;
            top: .34rem;
            border: 1px solid #ddd;
            display: none;
            cursor: pointer;

            .cart-title {
                font-weight: bold;
                padding: .1rem;
                border-bottom: 1px dashed #ddd;
            }

            .goods-info {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: .1rem;

                .goods-img {
                    flex: 2;
                }

                .goods-desc {
                    flex: 5;
                }

                .goods-price {
                    flex: 2;
                }
            }

            .cart-footer {
                padding: .1rem;
                background-color: #F5F5F5;
                position: relative;

                span:nth-of-type(2) {
                    padding: .05rem;
                    border-radius: .05rem;
                    background-color: #DC1742;
                    color: white;
                    position: absolute;
                    right: .1rem;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}